<template>
    <div id="mainapp">
            <div id="formdemo01">
       
     <el-form  :model="formInline" class="demo-form-inline">
          <el-row :gutter="12">
              <el-col :span="5">
         <el-form-item label="姓名:">
    <el-input class="input1" v-model="formInline.name"></el-input>
  </el-form-item>
  </el-col>
   <el-col :span="5">
  <el-form-item label="身份证号:">
    <el-input v-model="formInline.card" ></el-input>
  </el-form-item>
  </el-col>
   <el-col :span="5">
  <el-form-item label="年龄:">
    <el-input v-model="formInline.age" ></el-input>
  </el-form-item>
   
  </el-col>
  <el-col :span="5">
  <el-form-item label="科室:">
    <el-input v-model="formInline.departmentname" ></el-input>
  </el-form-item>
  </el-col>
  
  
     

  
   <el-col  :span="5">
  <el-form-item label="医生:">
    <el-input v-model="formInline.doctorname" ></el-input>
  </el-form-item>
   </el-col>
   <el-col :span="5">
   <el-form-item label="电话:">
    <el-input v-model="formInline.telephone" ></el-input>
  </el-form-item>
   </el-col>
   <el-col :span="5">
   <el-form-item label="挂号费:">
    <el-input v-model="formInline.cost" ></el-input>
  </el-form-item>
   </el-col>
   <el-col :span="5">
   <el-form-item label="审批人">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
   </el-col>
   <el-row  :gutter="20">
         <el-col :span="12" :offset="8">
            <el-button  type="primary" @click="dialogTableVisible  = true"  icon="el-icon-edit" >开始收费</el-button>
        <el-button type="primary" @click="qrsf" icon="el-icon-check">确认收费</el-button> 
             </el-col>
            </el-row>

  </el-row>

    </el-form>
 </div>  
    <div>
<div>
<el-dialog  width="1200px" title="选择病人" :visible.sync="dialogTableVisible ">
     
     <div class="shousuo">
      <el-input  v-model="sou" placeholder="请输入搜索内容" style="width:240px;margin-bottom: 40px;"></el-input>
      <el-button style="margin-left: 20px;" icon="el-icon-search" circle></el-button>
    </div>


   <el-table
    :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
    border
    >
  

    <el-table-column
      prop="id"
      label="单据号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="telephone"
       width="180"
      label="电话">
    </el-table-column>
    <el-table-column
     width="180"
      prop="card"
      label="身份证号">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
    <el-table-column
     width="130"
      prop="departmentname"
      label="科室">
    </el-table-column>
    <el-table-column
      prop="doctorname"
      label="医生">
    </el-table-column>
    <el-table-column
      prop="type"
      label="挂号类别">
    </el-table-column>
    <el-table-column
      prop="date"
      label="挂号时间">
    </el-table-column>
    <el-table-column
      prop="cost"
      label="挂号费">
    </el-table-column>
    
     <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="sfhandleClick(scope.row)" type="primary" size="small">选择</el-button>
        
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,4,6,10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>

</el-dialog>

 </div>

    </div>

   
      
  <div class="xiangmujftable" v-if="xmisshow">
   <el-table
    :data="xiangmu.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
    border
    style="width: 1000px"
    :header-cell-style="{background:'gainsboro', color:'#000'}"
    >

   <el-table-column
      prop="name"
      label="项目名称"
      >
    </el-table-column>
    <el-table-column
      prop="cishu"
      label="数量"
     >
    </el-table-column>
    <el-table-column
      prop="cost"
      
      label="单价">
    </el-table-column>
    <el-table-column
    
      prop="total"
      label="小计">
    </el-table-column>
     <el-table-column
      prop="sfjiancha"
      label="状态">
    </el-table-column>
     
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,4,6,10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :xiangmu="xiangmu.length">
    </el-pagination>


 </div>
    <div>
      <el-dialog  width="400px" title="确认收费" :visible.sync="querenshouren ">
        <div style="margin: 20px;"></div>
<el-form  label-width="80px" :model="formLabelAlign">
  <el-form-item label="应收金额">
    <el-input v-model="formLabelAlign.yingshou"></el-input>
  </el-form-item>
  <el-form-item label="已收金额">
    <el-input v-model="formLabelAlign.yishou"></el-input>
  </el-form-item>
  <el-form-item label="应找零头">
    <el-input v-model="formLabelAlign.yingzhao"></el-input>
  </el-form-item>
    <el-button @click="tijiaojine()" type="primary" size="small">提交</el-button>
    <el-button  type="primary" size="small">取消</el-button>
</el-form>

      </el-dialog>
    </div>

    </div>
</template>
<script>

import { ghlist,chaxunid} from "../../api/Department";
import { getgoumai,updateqian} from "../../api/Listofnoninpatientitems";
export default {
    data(){
        return{
            dialogTableVisible:false,
            xmisshow:false,
            sou:'',
            pagesize:2,
            currentPage:1,
            userid:1,
            querenshouren:false,
            
             formInline: {
        name:"",
        card:"",
        age:"",
        departmentname:"",
        doctorname:"",
        telephone:"",
         cost: "",
        region: "",
      },  
        xiangmu:[{
        name:'',
        cost:'',
        cishu:'',
        total:'',
        sfjiancha:'',
      }],
          tableData: [
        {
        id:'',
        name: "",
        age:'',
        telephone: "",
        card: "",        
        type:'',
        doctorname:'',
        departmentname:'',
        date:'',
        cost:'',
        }
        
      ],
      formLabelAlign:{
        yingshou:'',
        yishou:'',
        yingzhao:'',
      }
        }
    },
     mounted(){
      this.chaxunguahao();
    },
    watch:{
     formLabelAlign:{
        deep: true,// 深度监听

      handler(val){
        
          if (isNaN(parseInt(this.formLabelAlign.yingshou) - parseInt(this.formLabelAlign.yishou))) {
        return ''
      } else {
        
        return  this.formLabelAlign.yingzhao=parseInt(this.formLabelAlign.yingshou) - parseInt(this.formLabelAlign.yishou)
      }

       }
      }
      
    },
   
    methods:{
         handleSizeChange(pagesize) {
       this.pagesize=pagesize;
      },
      handleCurrentChange(currentPage) {
        this.currentPage=currentPage;
      },
      sfhandleClick(row){
        this.dialogTableVisible=false;
          this.xmisshow=true;
           this.formInline=row
      
           this.formInline.name=row.name
           
       
           
           chaxunid({name:this.formInline.name}).then(res=>{
              
               this.userid=res.result[0].id
               
                getgoumai({patientId:this.userid}).then(res=>{
            this.xiangmu=res.result
        })  
           })
           
       
      },
      tijiaojine(){
        updateqian({yishou:this.formLabelAlign.yingshou,patientid:this.userid}).then(res=>{
            console.log("nice")
             this.querenshouren=false;
             this.xiangmu=[]
        })
      },
      qrsf(){
          this.querenshouren=true;
           this.formLabelAlign.yingshou=this.xiangmu[0].total;
           
    //        if(this.formLabelAlign.yishou!=null){
    // this.formLabelAlign.yingzhao= this.formLabelAlign.yingzhao-this.formLabelAlign.yishou;
    //        }
    //       console.log( this.formLabelAlign.yingzhao)
      },
        chaxunguahao(){
          ghlist().then(res=>{
           
            this.tableData=res.result
          })
       },
      
    }
}
</script>
<style  scoped>
.mainapp{
  min-width: 700px;
  max-width: 2000px;
}
#formdemo01{
     margin-top: 30px;
  margin-left: 150px;
}


.xiangmujftable{
 
  margin-top: 40px;
  margin-left:110px;
  width: 1600px;
  height: 300px;

  padding-right: 400px;
}
</style>
